.avatar{
	display: inline-block;
	position: relative;
	width: 40px;
	height: 40px;
	margin-right: 16px;
	transition: all .5s ease;
}

.avatar img,
.avatar a >img{
	width: 100%;
	height: 100%;
	display: block;
}

.avatar-circle img{
	border-radius: 100% !important;
}

.avatar-sq img{
	border-radius: 0 !important;
}

.avatar-xs{
	width: 30px;
	height: 30px;
}

.avatar-sm{
	width: 40px;
	height: 40px;
}

.avatar-md{
	width: 50px;
	height: 50px;
}

.avatar-lg{
	width: 60px;
	height: 60px;
}

.avatar-xl{
	width: 70px;
	height: 70px;
}

.status{
	display: inline-block;
	right: 2px;
	bottom: 2px;
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 100%;
}

.avatar .status{
	position: absolute;
}

.avatar-xs > .status{
	width: 8px;
	height: 8px;
}

.avatar-sm > .status{
	width: 10px;
	height: 10px;
}

.avatar-md > .status{
	width: 12px;
	height: 12px;
}

.avatar-lg > .status,
.avatar-xl > .status{
	width: 14px;
	height: 14px;
}

.status-online{
	background-color: $success;
}

.status-away{
	background-color: $warning;
}

.status-offline{
	background-color: $danger;
}